<template>
  <view class="u-wrap">
    <view class="u-search-box">
		<view class="">
			<u-search placeholder="请输入关键词进行搜索" v-model="keyword" :show-action="false" :clearabled="true" @search="searchEnterFun"></u-search>
		</view>
    </view>
	
	<block>
		<scroll-view scroll-y class="right-box" :scroll-top="scrollTopTwo"  @bindscrolltolower="bottomDown" @scrolltoupper="bottomUp">
		  <view class="page-view" v-for="(item,index) in contentData" :key="index"
			:class="{changeStylebg:item.checked == true}">
				  <view class="box-top">
					<view class="top-time">
						{{item.day}}
					</view>
					<view class="">
						<u-checkbox-group @change="Checked(index)">
							<u-checkbox v-model="item.checked" shape="square" active-color="#FFC694"></u-checkbox>
						</u-checkbox-group>
					</view>
				  </view>
				  <view style="border: #FFC694 1rpx solid;width: 92%;margin: 0 auto;"></view>
				  <view class="box-bottom">
            <view class="bottom-top">
              {{item.title}}
            </view>
            <view class="bottom-content">
              {{item.desc}}
            </view>
				  </view>
		  </view>
		</scroll-view>
	</block>
	<view class="bottom">
	  <view class="bottom_but">
	    <span class="bottom_but_text" @click="complete">完成选择</span>
	  </view>
	</view>
  </view>
</template>

<script>
import classifyData from "./classify.data.js";
export default {
	name:'search',
  data() {
    return {
      keyword:'',
      changeSelectStybg:'',
      contentData:[],
      total:"",
      page:1,
      limit:10,
      showTotal:false,
      timer:''
    }
  },
  computed: {

  },
  methods: {
    async getRiliContent(){
      let params={
        "login_token":uni.getStorageSync('loginToken'),
        "page":this.page,
        "limit":this.limit,
        "keyword":this.keyword
      }

      uni.showLoading({
        title: '加载中'
      });
      let res=await this.$api.getGeneralContentList(params)
      uni.hideLoading();
      if(res.data.level == "success"){
        this.contentData = res.data.data;
        this.total = Math.ceil(res.data.total / this.page);
      }else{
        uni.showToast({
          title:res.data.message,
          icon:'none'
        })
      }
    },
    Checked(index){
      console.log(index)
      this.changeSelectStybg = index
    },
    searchEnterFun(){
       this.getRiliContent()
    },
    bottomDown(){
      console.log("aaa")
      if (this.page >= this.total) {
        this.showTotal=true
        return false;
      }
      this.page ++;
      this.getRiliContent();
    },
    bottomUp(){
      if (this.page < this.total) {
        this.showTotal=false
        return false;
      }
      this.page --;
      this.getRiliContent();
    },
    Checked(index){
      let actionType = ''
      let generalId  = this.contentData[index].id
      if(this.contentData[index].checked){
        actionType='add'
      }else {
        actionType='del'
      }

      this.setContentToProgramme(actionType,generalId,index)
    },
    async setContentToProgramme(actionType,generalId,index){
      let params={
        "login_token":uni.getStorageSync('loginToken'),
        "general_id":generalId,
        "action_type":actionType,
      }

      let res=await this.$api.setGeneralContentOneToProgrammeContent(params)
      if(res.data.level == "success"){
        this.changeSelectStybg = index
      }else{
        uni.showToast({
          title:res.data.message,
          icon:'none'
        })
      }
    },
    complete(){
      uni.navigateBack({
        delta:-1
      })
    }
  },
  onReachBottom(){
    if(this.timer != null){
      clearTimeout(this.timer);
    }
    let _this = this
    _this.timer = setTimeout(function(){
      //加载更多数据
      console.log("aaa")
      if (_this.page >= _this.total) {
        _this.showTotal=true
        return false;
      }
      _this.page ++;
      _this.getRiliContent();
    }, 1000);
  }
}
</script>

<style lang="scss" scoped>
	
	.u-wrap {
	  min-height: calc(100vh);
	  /* #ifdef H5 */
	  height: calc(100vh - var(--window-top));
	  /* #endif */
	  display: flex;
	  flex-direction: column;
	  background-color: #EBB27F;
	}
	
	.u-search-box {
	  padding: 18rpx 30rpx;
	  background: #91150F;
	  position: fixed;
	  top: 0;
	  width: 100vw;
	  z-index: 999;
	}
	
	.u-menu-wrap {
	  flex: 1;
	  display: flex;
	  overflow: hidden;
	  background-color: #EBB27F;
	}
	
	.u-search-text {
	  font-size: 26rpx;
	  color: $u-tips-color;
	  margin-left: 10rpx;
	}
	
  .bottom{
    background-color: #FFC18A;
    border-top: #93110A solid 1rpx;
    position: fixed;
    bottom: 0;
    // left: 0;
    height: 130rpx;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .bottom_but{
    background-image: url(../../static/img/login_imgTwo.png);
    background-repeat: no-repeat;
    height: 100rpx;
    background-size: 100% 100%;
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFC695;
  }
  .right-box {
	margin-bottom: 180rpx;
	margin-top: 110rpx;
  }
  .page-view {
    background-color: #91150F;
    width: 90%;
	margin: 0 auto;
	margin-top: 20rpx;
  }
  .box-top{
  	padding: 28rpx;
  	display: flex;
  	justify-content: space-between;
  	align-items: center;
  	color: #FFD4A5;
  }
  .box-bottom{
  	padding: 28rpx;
  }
  .bottom-top{
  	padding-bottom: 25rpx;
  	color: #FFD4A5;
  	font-size: 30rpx;
  }
  .bottom-content{
  	color: #bd9d81;
  	font-size: 29rpx;
  	line-height: 35rpx;
	
	text-overflow: -o-ellipsis-lastline;
	 overflow: hidden;
	 text-overflow: ellipsis;
	 display: -webkit-box;
	 -webkit-line-clamp: 3;
	 line-clamp: 3;
	 -webkit-box-orient: vertical;
  }
  .changeStylebg{
  	background-color: #7F090B;
  	width: 90%;
  	margin: 0 auto;
  	margin-top: 20rpx;
  }
</style>
